var scaleChoice = 1;
var scaleFactor = [1.25, 1.5, 1.75];
var slideChoice = -1;
var rgb = [100, 100, 100];
var svgDoc;

function init(evt) {
    var obj, obj1;
    for(var i = 0; i < 3; i += 1){
        (function (i) {
            obj = document.getElementById('scale' + i);
            obj1 = document.getElementById('sliderGroup' + i);
            obj.addEventListener('click', clickButton, false);
            obj1.addEventListener('mousedown', startColorDray, false);
            obj1.addEventListener('mousemove', doColorDrag, false);
            obj1.addEventListener('mouseup', endColorDrag, false);
        })(i);
    }
    document.getElementById('nRings').addEventListener('change', createRings, false);
    if(parent) {
        parent.setShirtColor = svgSetShirtColor;
    }
    // svgDoc = document.getElementById('shirt').getSVGDocument();
    transformShirt();
}

function startColorDray(event) {
    var sliderId = event.target.parentNode.getAttribute('id');
    endColorDrag(event);
    slideChoice = parseInt(sliderId[sliderId.length - 1]);
}

function endColorDrag(event) {
    if(slideChoice >= 0) {
        if(parent) {
            parent.updateHTMLField(slideChoice, rgb[slideChoice]);
        }
    }

    slideChoice = -1;
}

function doColorDrag(event) {
    var sliderId = event.target.parentNode.getAttribute('id');
    var chosen = parseInt(sliderId[sliderId.length - 1]);
    if(slideChoice == chosen) {
        svgSetShirtColor(slideChoice, 100 - (event.clientY - 10));
    }
}

function clickButton(event) {
    var choice = event.target.parentNode;
    var name = choice.getAttribute('id');
    var old = document.getElementById('scale' + scaleChoice);
    old.removeAttribute('class');
    choice.setAttribute('class', 'selected');
    scaleChoice = parseInt(name[name.length - 1]);
    transformShirt();
}

function transformShirt() {
    var factor = scaleFactor[scaleChoice];
    var obj = document.getElementById('shirt');
    obj.setAttribute('transform', 'translate(150, 150)' + 'scale(' + factor + ')');
    obj.setAttribute('stroke-width', 1 / factor);
}

function updateSVG(which, amount) {
    amount = parseInt(amount);
    if(!isNaN(amount) && window.setShirtColor) {
        window.setShirtColor(which, amount);
    }
}

function updateHTMLField(which, percent) {
    document.getElementById('fld' + which).value = percent;
}

function svgSetShirtColor(which, percent) {
    var obj, colorStr, newText;
    if(percent < 0) { percent = 0; }
    if(percent > 100) { percent = 100; }

    obj = document.getElementById('slide' + which);
    obj.setAttribute('y1', 100 - percent);
    obj.setAttribute('y2', 100 - percent);
    rgb[which] = percent;

    // colorStr = `rgb(${rgb[0]}%, ${rgb[1]}%, ${rgb[2]}%)`;
    colorStr = 'rgb(' + rgb[0] + '%,' + rgb[1] + '%,' + rgb[2] + '%)';
    obj = document.getElementById('shirt');
    obj.style.setProperty('fill', colorStr, null);
}

function createRings (event) {
    var nRings = event.target.value;
    var shirt = document.getElementById('shirt');
    var rings = shirt.getElementsByTagName('circle');
    var i, radius, circle;

    for(i = rings.length - 1; i >= 0;  i -= 1) {
        shirt.removeChild(rings[i]);
    }

    //限定范围0-5
    if(nRings < 0) { nRings = 0; }
    else if (nRings > 5) { nRings = 5; }

    radius = nRings * 4;
    for(i = 0; i < nRings * 2; i += 1) {
        circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', 0);
        circle.setAttribute('cy', 0);
        circle.setAttribute('r', radius);

        if(i % 2 == 0) {
            circle.style.cssText = 'fill:black;stroke:none;';
        } else {
            circle.style.cssText = 'fill:white;stroke:none;';
        }

        shirt.appendChild(circle);
        radius -= 2;
    }
}

init();